<template>
	<div class="warehousingproduct">
	    <div class="modal-backdrop" @click="close">
        <div class="modal"  @click.stop>
          <div class="modal-header">
                <slot name="header">
                <h3 class="title">入库产品</h3>
                <div class="close" @click="close">x</div>
                </slot>
            </div>
            <div class="modal-body">
                <slot name="body">
                	<div class="productList">
                		<div class="product" v-for="(item,index) in stockInProductInfos">
                			<h3>{{item.productName}}</h3>
                			<div class="productSerials" v-for="(arr,key) in item.productSerials">
                				<p class="Serials">{{arr}}</p>
                				<i class="el-icon-erp-shanchu delete"  @click="dele(index,key)"></i>
                				<!--<p class="delete" @click="dele(index,key)">x</p>-->
                			</div>               			
                		</div>
                	</div>
                </slot>
            </div>            
        </div>
    </div>
	</div>
</template>

<script>
export default {
	name: 'warehousingproduct',
	props: {
		stockInProductInfos: {
			type: Array,
			default: []
		}
	},
	data() {
		return {

		}
	},
	mounted() {

	},
	methods: {
		//删除
		dele(index, arr) {
			this.$messagebox.confirm('确定删除吗?').then(action => {
				this.stockInProductInfos[index].productSerials.splice(arr, 1)
				if(this.stockInProductInfos[index].productSerials.length == 0) {
					this.stockInProductInfos.splice(index, 1)
				}				
				this.$emit('newPorductList', this.stockInProductInfos)
				if(this.stockInProductInfos.length == 0) {
					this.$emit('closeModal', false);
				}
			});
		},
		//关闭模态框
		close() {
			this.$emit('closeModal', false);
		}
	}
}
</script>

<style scoped>
	 .modal-backdrop {
	 	position: absolute;
	 	top: 0;
	 	right: 0;
	 	bottom: 0;
	 	left: 0;
	 	z-index: 88;
	 	overflow-x: hidden;
	 	background-color: rgba(0, 0, 0, .3);
	 	display: flex;
        justify-content: center;
        align-items: center; 
	 }
	 
	 .modal {
	 	background-color: #fff;
        box-shadow: 2px 2px 20px 1px;
        border-top-right-radius: 22px;
        border-top-left-radius: 22px;
        overflow-x:hidden;
        display: flex;
        flex-direction: column;
	 	position: fixed;
	 	top: 200px;
	 	bottom: 0;
	 	left: 0;
	 	right: 0;
	 	width: 100%;
	 }
	 .modal-header {
	 	display: flex;
	 	width: 100%;
	 	height: 100px;
	 	border-bottom: 1px solid gainsboro;
	 	background: #FFFFFF;
	 	position: fixed;
	 	left: 0;
	 	z-index: 88;
	 }
	 
	 .title {
	 	flex: 1;
	 	text-align: center;
	 	line-height: 100px;
	 	font-size: 28px;
	 }
	 
	 .close {
	 	position: absolute;
	 	right: 35px;
	 	font-size: 44px;
	 	line-height: 100px;
	 	color: dimgrey;
	 }
	 
	 .modal-body {
	 	overflow-y: auto;
	 	margin-top: 100px;
	 }
	 .product{
	 	padding:0 20px;
	 	border-bottom: 2px solid gainsboro;
	 }
	.product h3{
		font-size: 40px;
		text-align: center;
	}
	.productSerials{
		width:100%;
		display: flex;
		padding-bottom: 5px;		
	}
	.Serials{
		flex: 1;
		font-size: 30px;
		border-right:2px solid gainsboro;
	}
	.delete{
		width:100px;
		font-size: 45px;
		color: #FF0000;
	}
</style>